<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mi浮动</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            background-color: white;
        }
        .image-shadow{
            position: relative;
            margin: 50px auto;
            width: 350px;
            height: 500px;
            background-color: white;
            border-radius: 20px;
            -webkit-transition: all .2s linear;
            transition: all.2s linear;
            box-shadow: 13px 28px 30px -3px black;
        }
        .image-shadow:hover{
            z-index:2;
            -webkit-transform: translate3d(0, -50px, 0); /*向上浮动*/
            transform: translate3d(0, -2px, 0);
        }
        .mi{
            position: absolute;
            left: 75px;
            top: 80px;
        }       
        .mi10{
            position: absolute;
            top: 360px;
            left: 110px;
            font-size: 20px;
            font-family: "Microsoft YaHei UI";
            color: #000000;
        }
        .text{
            position: absolute;
            top: 390px;
            left: 60px;
            font-size: 15px;
            color: #B0B0B0;
        }
        .pirce{
            position: absolute;
            top: 440px;
            left: 50%;
            margin-left:-35px;
            color: #ff6700;
            font-family: Consolas;
        }

    </style>
</head>
<body>
<div class="image-shadow">
    <img src="img/mpro.jpg" alt="mi" class="mi" style="border-radius: 10px;" width="200">
    <p class="mi10">小米10 至尊版</p>
    <p class="text">120X 变焦/120W秒充/120Hz屏幕</p>
    <p class="pirce"> RMB 5299 </p>
</div>
</body>
</html>